import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import QtQuick3D.Effects 6.2

Component{
    Rectangle {
        id:middleBtn
        anchors.fill: parent
        radius: 15
        color:btnColor
        state: "released"

        signal middelBtnClickedSig(string name)

        states: [
            State {
                name: "pressed"
                PropertyChanges { target: middleBtn; color: btnColorPressed }
            },
            State {
                name: "released"
                PropertyChanges { target: middleBtn; color: btnColor }
            }
        ]

        property string buttonText
        property url buttonImg

        Rectangle{
            width: parent.width-10
            height: parent.height-10
            anchors.centerIn: parent
            color:"transparent"
            RowLayout {
                anchors.fill: parent
                spacing: 10
                Image {
                    source: buttonImg
                }
                Text {
                    text: buttonText
                    color:textColor
                }
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                middelBtnClickedSig(buttonText)
            }
            onPressed: {
                middleBtn.state = "pressed"
            }
            onReleased: {
                middleBtn.state = "released"
            }
        }
    }
}
